import React from "react";
import { useSelector, useDispatch } from "react-redux";
// 同步删除
// import { delTodo } from "@/store/slice/todoSlice";
// 异步删除
import { delTodo2 } from "@/store/slice/todoSlice";
function TodoMain() {
  const list = useSelector((store) => store.todo);
  // console.log("list", list);
  // 通过useDispatch 派发事件
  const dispatch = useDispatch();
  return (
    <section className="main">
      <ul className="todo-list">
        {list.map((item) => (
          <li
            className={item.done ? "completed" : ""}
            key={item.id}
          >
            <div className="view">
              <label>{item.name}</label>
              <button
                className="destroy"
                onClick={() => dispatch(delTodo2({ id: item.id }))}
              ></button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default TodoMain;
